<template>
  <el-card class="archives-main" shadow="never">
    <div class="archives-sort">
      <el-radio-group v-model="reverse">
        <el-radio :label="true">倒序</el-radio>
        <el-radio :label="false">正序</el-radio>
      </el-radio-group>
    </div>
    <el-timeline class="overview-timeline">
      <el-timeline-item
        placement="top"
        timestamp="文章总览 - 28"
        size="large"
        color="#49b1f5"
      />
    </el-timeline>
    <el-timeline :reverse="reverse">
      <el-timeline-item
        v-for="item of archivesArr"
        :key="item.id"
        placement="top"
        :timestamp="item.year"
        color="#ff7242"
      >
        <ul class="archives-list">
          <li
            v-for="article of item.articles"
            :key="article.id"
            class="archives-list-item"
          >
            <div class="list-item-img">
              <router-link
                :to="{ path: '/articleDetail', query: { articleId: 1 } }"
                class="list-item-link"
              >
                <el-image :src="articleImg" fit="contain">
                  <template #error>
                    <div class="image-slot">
                      <i class="el-icon-picture-outline" />
                    </div>
                  </template>
                </el-image>
              </router-link>
            </div>
            <div class="list-item-content">
              <p class="list-item-content-other">
                <i class="el-icon-third-date" />
                <time class="date">
                  {{ article.createDate }}
                </time>
              </p>
              <router-link
                :to="{ path: '/articleDetail', query: { articleId: 1 } }"
                class="list-item-link"
              >
                <p class="list-item-content-text ellipsis3">
                  {{ article.title }}
                </p>
              </router-link>
            </div>
          </li>
        </ul>
      </el-timeline-item>
    </el-timeline>
  </el-card>
</template>

<script>
import $api from "$api/archives";
export default {
  name: "ArchivesMain",
  data() {
    return {
      reverse: true,
      articleImg: "/article.png",
      archivesArr: [],
    };
  },
  mounted() {
    this.getArchives();
  },
  methods: {
    getArchives() {
      $api.getArchives().then((res) => {
        if (res.status === 200) {
          this.archivesArr = res.data;
        }
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
.archives-sort {
  text-align: center;
}

.el-timeline >>> .el-timeline-item__wrapper {
  top: -0.07rem;
}

.el-timeline >>> .el-timeline-item__timestamp {
  font-size: 0.2rem;
  color: #4c4948;
}

.overview-timeline >>> .el-timeline-item__timestamp {
  font-size: 0.25rem;
}

.el-timeline >>> .el-timeline-item:last-child .el-timeline-item__tail {
  display: block;
}

.archives-list-item {
  width: 100%;
  padding-top: 0.2rem;
  display: flex;
  justify-content: space-between;
}

.list-item-img {
  width: 15%;
}

.el-image {
  height: 100%;
  border-radius: 0.03rem;
}

.el-image >>> img {
  transition: all 0.6s;
}

.el-image >>> img:hover {
  transform: scale(1.1);
}

.list-item-content {
  width: 82%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.list-item-content-text {
  transition: all 0.3s;
}

.list-item-content-text:hover {
  color: var(--colorLevel1);
  transform: translateX(0.1rem);
}

.list-item-content-other {
  color: #858585;
  margin-bottom: 0.1rem;
}

.list-item-content-other i[class*="el-icon-third-"] {
  font-size: 0.14rem;
  margin-right: 0.05rem;
}
</style>